<template>
    <div>
    <Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="650" :styles="{top: '100px'}">
        <Form ref="vipTypeForm" :model="vipTypeForm" :label-width="70" :rules="formValidate">
            <FormItem label="会员名称" prop="vipName">
                <Input v-model="vipTypeForm.vipName" autocomplete="off"/>
            </FormItem>
            <FormItem label="会员编码" prop="vipCode">
                <Input v-model="vipTypeForm.vipCode"/>

            </FormItem>

            <FormItem v-for="(item, index) in vipTypeForm.items" v-if="item.status" :key="index" :label="'权益 ' + item.index" :prop="'items.' + index + '.value'"  :rules="{required: true, message: '权益 ' + item.index +' 不能为空', trigger: 'blur'}">
                <Row>
                    <Col span="15">
                        <Input type="text" v-model="item.value" placeholder="请输入选项值"></Input>
                    </Col>
                    <Col span="3" offset="1">
                        <Button @click="handleRemove(index)">删除</Button>
                    </Col>
                </Row>
            </FormItem>
            <FormItem>
                <Row>
                    <Col span="12">
                        <Button type="dashed" long @click="handleAdd" icon="md-add">添加会员权益</Button>
                    </Col>
                </Row>
            </FormItem>

        </Form>
        <div slot="footer">
            <Button type="text" @click="cancelUser">取消</Button>
            <Button type="primary" :loading="submitLoading" @click="handelSubmit">提交</Button>
        </div>
    </Modal>
    </div>
</template>

<script>
    import {add, edit,delByIds, list,getVipType} from "@/api/vipType";
    export default {
        name: "vipTypeDrawer",
        components: {

        },
        data() {
            return {
                type:0,
                accessToken: {},
                errorPass: "",
                deptLoading: false,
                modalTitle: "会员",
                index: 1,
                dataDep: [],
                userRoles: [],
                roleList: [],
                submitLoading: false,
                modalVisible: false,
                vipTypeForm: {
                    vipName: "",
                    vipCode: "",
                    vipTime:0,
                    vipConfigItems:"",
                    vipPrice: 0,
                    iosPrice: 0,
                    items: [
                        {
                            value: null,
                            index: 1,
                            status: 1
                        }
                    ]
                },
                formValidate: {
                    vipName: [{required: true, message: "会员名称不能为空", trigger: "blur"}],
                    vipCode: [{required: true, message: "会员编码不能为空", trigger: "blur"}],
                    vipTime: [{required: true,type: 'number', message: "有效时长不能为空", trigger: "blur"}],
                    vipPrice:[{required: true,type: 'number', message: "会员价格不能为空", trigger: "blur"}]
                }
            }
        },
        methods: {
            init() {

            },
            getData() {
                this.loading = true;
                getVipType(this.vipTypeForm.id).then(res => {
                    this.loading = false;
                    if (res.status === true) {
                        var items=res.data.vipConfigItems;
                        delete res.data.vipConfigItems;
                        res.data.items=JSON.parse(items);
                        this.vipTypeForm = res.data;
                        this.index=res.data.items.length;
                    }
                });
            },
            showDrawer(params) {
                this.modalVisible = true;
                if (params.id) {
                    this.type = 1;
                    this.modalTitle = "编辑VIP类型";
                    this.vipTypeForm.id=params.id;
                    this.getData();
                } else {
                    this.$refs.vipTypeForm.resetFields();
                    this.modalTitle = "添加VIP类型";
                    this.type = 0;
                }
            },
            cancelUser() {
                this.modalVisible = false;
            },
            handleAdd () {
                this.index++;
                this.vipTypeForm.items.push({
                    value: '',
                    index: this.index,
                    status: 1
                });
            },
            handleRemove (index) {
                this.vipTypeForm.items[index].status = 0;
                this.vipTypeForm.items.splice(index, 1);
                this.index--;
            },
            handelSubmit() {
                this.$refs.vipTypeForm.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        this.vipTypeForm.vipConfigItems=JSON.stringify(this.vipTypeForm.items);
                        if (this.type === 0) {
                            // 添加 避免编辑后传入id等数据 记得删除
                            delete this.vipTypeForm.id;
                            add(this.vipTypeForm).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("添加成功");
                                    this.$parent.getDataList();
                                    this.modalVisible = false;
                                }
                            });
                        } else if(this.type === 1){
                            // 编辑
                            edit(this.vipTypeForm).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("修改成功");
                                    this.$parent.getDataList();
                                    this.modalVisible = false;
                                }
                            });
                        }
                    }
                });
            }
        },
        mounted() {

        }
    }
</script>

<style>

</style>